<template>
  <div class="scenic-detail">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <!--      <el-button type="primary" icon="el-icon-back" @click="goBack"></el-button>-->
      <span>门票购买</span>
      <el-dropdown>
        <span class="el-dropdown-link">
          <i class="el-icon-more"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-menu-item>选项1</el-menu-item>
          <el-menu-item>选项2</el-menu-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <!-- 图片展示区域 -->
    <div class="image-container">
      <img :src="resortImage" alt="北京环球度假区" class="responsive-image" />
    </div>

    <!-- 景区信息区域 -->
    <el-card class="scenic-info">
      <div class="title">北京环球度假区</div>
      <div class="sub-info">
        <!-- <el-rate :value="rating" disabled></el-rate> -->
        <span>{{ reviews }}条评价</span>
      </div>
      <div class="entry-time">最晚18:00入园</div>
      <el-row>
        <el-col :span="8">
          <el-button type="text" @click="showTicketNotice">购票须知</el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="text" @click="showScenicDetails">景点介绍</el-button>
        </el-col>
      </el-row>
      <el-row class="ranking">
        <el-col :span="6">
          <el-tag type="success">榜</el-tag>
        </el-col>
        <!--        <el-col :span="18" @click="showRanking">-->
        <!--          <span>北京必游人气版[第1名]</span>-->
        <!--          <i class="el-icon-arrow-right"></i>-->
        <!--        </el-col>-->
      </el-row>
      <div class="address" @click="showRanking">
        <span>北京必游人气版[第1名]</span>
        <i class="el-icon-arrow-right"></i>
      </div>
      <div>
        <span>北京市通州区环球大道</span>
        <!--        <i class="el-icon-arrow-right"></i>-->
      </div>
    </el-card>

    <!-- 游玩指南区域 -->
    <el-card class="guide-area">
      <div class="guide-title">游玩指南</div>
      <el-button type="text" @click="CkanTicketNotice">查看更多 ></el-button>
      <el-row class="guide-items">
        <el-col :span="8" v-for="(guide, index) in guideList" :key="index">
          <el-card class="guide-item">
            <img :src="guide.image" alt="游玩项目图片" @click="XqingScenicDetails" class="guide-item-image" />
            <div class="guide-item-title">{{ guide.title }}</div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 门票购买选项区域 -->
    <el-card class="ticket-options">
      <div class="ticket-options-title">门票购买</div>
      <el-row>
        <el-col :span="8">
          <el-button type="primary">今日出游</el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="primary">明日出游</el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="primary">指定日期</el-button>
        </el-col>
      </el-row>
      <el-table :data="ticketOptions" style="width: 100%">
        <el-table-column prop="name" label="票种" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
            <el-tag type="warning" v-if="scope.row.isTodayAvailable">可定今日</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.price }}元</span>
            <del v-if="scope.row.originalPrice" style="color: #999; margin-left: 5px;">{{ scope.row.originalPrice }}元</del>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="reserveTicket(scope.row)">预订</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 购票须知弹窗 -->
    <el-dialog title="购票须知" :visible.sync="dialogVisible" width="40%" center>
      <div class="ticket-notice">
        <h3>购票须知</h3>
        <p>儿童：6周岁(含)以下或1.2米(含)以下，免费；6周岁(不含)至18周岁(含)未成年人，半价</p>
        <p>老人：70周岁(含)以上，需提供本人身份证或老年证，免费；60周岁(含)至69周岁(含)老人，凭老年证或身份证，半价</p>
        <p>残疾人：凭本人残疾证。一级、二级肢体、智力、视力残疾者可有一名陪护免费进入。</p>
        <p>军人：现役军人及残疾军人凭有效证件，免费</p>
        <p>学生：全日制大学本科及以下学历学生凭学生证，半价</p>
        <h3>退改规则</h3>
        <p>1、退款说明：提前一天、当天均可退票；换票、入园、逾期均不可退票。</p>
        <p>2、退款时间：零钱支付，退款完成后立刻到账；银行卡支付，退款完成后0－3个工作日到账（具体以银行到账时间为准）</p>
        <p>3、退款标准：提前一天退订不收取手续费，当天退订收取20%手续费，逾期全额收取；</p>
        <p>4、400客服中自电话：400***9888（接听时间：8:00－23:00）</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      resortImage: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.qlufzfVcfJWUgthkzwnYKgHaEd&w=322&h=193&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
      rating: 5,
      reviews: 32,
      guideList: [
        { image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.oJUAWDACmm_x-H-0GfBByAHaDQ?w=301&h=153&c=7&r=0&o=5&dpr=1.3&pid=1.7', title: '霸天虎过山车' },
        { image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.JzK_eh7-YPJDI0zK3pnmWQHaEZ?w=290&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7', title: '哈利·波特与禁忌之旅' },
        { image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.jR1c3qiHAWZ8AXx76_iKowHaEK?w=298&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7', title: '侏罗纪世纪大冒险' }
      ],
      ticketOptions: [
        {
          name: '标准票（成人票）',
          price: 500,
          originalPrice: 650,
          isTodayAvailable: true
        },
        {
          name: '学生票',
          price: 300,
          originalPrice: 500,
          isTodayAvailable: false
        },
        {
          name: '老年票',
          price: 300,
          originalPrice: 500,
          isTodayAvailable: true
        }
      ],
      dialogVisible: false
    };
  },
  methods: {
    // goBack() {
    //   // 这里可以添加返回上一页的逻辑
    //   console.log('返回上一页');
    // },
    reserveTicket(ticket) {
      if (this.$route.path !== '/jdgm') {
        this.$router.push({ path: '/jdgm', params: { ticket: ticket } });
      }
    },
    showTicketNotice() {
      this.dialogVisible = true;
    },
    showScenicDetails() {
      this.$router.push({ path: '/Jishao', params: {} });
    },
    showRanking() {
      this.$router.push({ path: '/Rqbang', params: {} });
    },
    CkanTicketNotice() {
      this.$router.push({ path: '/Ckan', params: {} });
    },
    XqingScenicDetails() {
      this.$router.push({ path: '/Xqing', params: {} });
    }
  },
  beforeDestroy() {
    // 清理逻辑
  }
};
</script>

<style scoped>
.scenic-detail {
  font-family: Arial, sans-serif;
  background-color: #f8f8f8;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #007bff;
  color: white;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.image-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.responsive-image {
  width: 100%;
  height: auto;
  max-height: 60vh;
  display: block;
  margin: 0 auto;
  filter: brightness(80%);
}

.scenic-info {
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin-top: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.sub-info {
  margin-bottom: 10px;
  color: #666;
}

.entry-time {
  margin-bottom: 10px;
  color: #666;
}

.ranking {
  margin-top: 10px;
}

.address {
  color: #67cbea;
  margin-top: 10px;
}

.guide-area {
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin-top: 20px;
}

.guide-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.guide-items {
  margin-top: 10px;
}

.guide-item {
  text-align: center;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease-in-out;
}

.guide-item:hover {
  transform: translateY(-5px);
}

.guide-item img {
  width: 500px; /* 设置固定的宽度 */
  height: 300px; /* 设置固定的高度 */
  object-fit: cover; /* 保持图片的宽高比并裁剪 */
  border-radius: 5px;
}

.ticket-options {
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin-top: 20px;
}

.ticket-options-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.el-button.primary {
  background-color: #007bff;
  border-color: #007bff;
}

.el-button.primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

.el-table {
  margin-top: 10px;
}

.el-table th {
  background-color: #f0f0f0;
}

.el-dialog {
  background-color: #f8f8f8;
}

.ticket-notice {
  padding: 20px;
}

.dialog-footer {
  text-align: center;
}
</style>
